<template>
  <el-form
    ref="refControl"
    class="demo-form-inline"
    v-bind="$attrs"
    :model="model"
    :inline="false"
    :label-suffix="labelSuffix"
    :label-width="labelWidth"
  >
    <base-item :colOrder="formMeta.colOrder"></base-item>
  </el-form>
</template>

<script setup lang="ts" generic="T extends object">
  //  :rules="formRules"
  import { ref, onMounted, reactive,  } from 'vue'
  // 表单组件的接口
  import type { IFromProps } from '../map'
  //  封装 el-form-item
  import baseItem from './base-item.vue'
  // 表单控件的 controller
  import { formController, myExpose } from '../map'

  defineOptions({
    name: 'nf-el-from-div',
    inheritAttrs: false,
  })

  // const props = withDefaults(defineProps<IFromProps<T>>(), {

  const props = withDefaults(defineProps<IFromProps<T>>(), {
    labelSuffix: '：',
    labelWidth: '130px'
  })
 
  // console.log('表单控件的props：', props)

  // 获取 $ref
  const { refControl, expose } = myExpose()
  // 暴露 el-form
  defineExpose({ expose })

  // 调用表单的控制类
  formController(props)
  
</script>